<template>
  <div>
    <Divider orientation="left">实时指标</Divider>
    <!-- 翻牌器  实时指标 -->
    <Row style="margin:0 0 10px 0" :gutter="10">
      <Col :span="6">
        <Metrics description="入站报文总数" title="入站报文总数" :number="realtimeMetrics.receiveTotal"></Metrics>
      </Col>
      <Col :span="6">
        <Metrics description="入站失败数" title="入站失败数" :number="realtimeMetrics.receiveFail"
                 icon="ios-warning-outline"></Metrics>
      </Col>
      <Col :span="6">
        <Metrics description="入站成功率" title="入站成功率" :number="realtimeMetrics.receiveSuccessRate"></Metrics>
      </Col>
      <Col :span="6">
        <Metrics description="入站平均耗时" title="入站平均耗时" :number="realtimeMetrics.avgCost"></Metrics>
      </Col>
    </Row>
    <Row style="margin:0 0 10px 0" :gutter="10">
      <Col :span="6">
        <Metrics description="出站总数" title="出站总数" :number="realtimeMetrics.sendTotal"></Metrics>
      </Col>
      <Col :span="6">
        <Metrics description="出站失败数" title="出站失败数" :number="realtimeMetrics.sendFail"
                 icon="ios-warning-outline"></Metrics>
      </Col>
      <Col :span="6">
        <Metrics description="出站成功率" title="出站成功率" :number="realtimeMetrics.sendSuccessRate"></Metrics>
      </Col>
      <Col :span="6">
        <Metrics description="会话数" title="会话数" :number="realtimeMetrics.sessionCnt" icon="ios-pulse-outline"></Metrics>
      </Col>
    </Row>
    <Divider orientation="left">日报表</Divider>
    <!-- 折线图  一个月内的日报表 -->
    <Row style="margin:0 0 10px 0" :gutter="10">
      <Col :span="12">
        <Card>
          <div id="receiveReport" :style="{ height: '300px'}"></div>
        </Card>
      </Col>
      <Col :span="12">
        <Card>
          <div id="sendReport" :style="{height: '300px'}"></div>
        </Card>
      </Col>
    </Row>
    <Row style="margin:0 0 10px 0" :gutter="10">
      <Col :span="12">
        <Card>
          <div id="sessionReport" :style="{height: '300px'}"></div>
        </Card>
      </Col>
      <Col :span="12">
        <Card>
          <div id="noAckReport" :style="{ height: '300px'}"></div>
        </Card>
      </Col>
    </Row>

    <Divider orientation="left">昨日TOP排名</Divider>
    <!-- 用户top -->
    <Row style="margin:0 0 10px 0" :gutter="10">
      <Col :span="12">
        <Card>
          <div id="userReceiveSuccessCntTop" :style="{height: '300px'}"></div>
        </Card>
      </Col>
      <Col :span="12">
        <Card>
          <div id="userSendSuccessCntTop" :style="{height: '300px'}"></div>
        </Card>
      </Col>
    </Row>
    <!-- 客户端top -->
    <Row style="margin:0 0 10px 0" :gutter="10">
      <Col :span="6">
        <Card>
          <div id="clientReceiveSuccessCntTop" :style="{height: '300px'}"></div>
        </Card>
      </Col>
      <Col :span="6">
        <Card>
          <div id="clientSendSuccessCntTop" :style="{height: '300px'}"></div>
        </Card>
      </Col>
      <Col :span="6">
        <Card>
          <div id="remoteAddressReceiveSuccessCntTop" :style="{height: '300px'}"></div>
        </Card>
      </Col>
      <Col :span="6">
        <Card>
          <div id="remoteAddressSendSuccessCntTop" :style="{height: '300px'}"></div>
        </Card>
      </Col>
    </Row>
    <!-- 主题top -->
    <Row style="margin:0 0 10px 0" :gutter="10">
      <Col :span="8">
        <Card>
          <div id="topicFilterSubscriberCntTop" :style="{height: '300px'}"></div>
        </Card>
      </Col>
      <Col :span="8">
        <Card>
          <div id="topicReceiveSuccessPublishCntTop" :style="{height: '300px'}"></div>
        </Card>
      </Col>
      <Col :span="8">
        <Card>
          <div id="topicSendSuccessPublishCntTop" :style="{height: '300px'}"></div>
        </Card>
      </Col>
    </Row>

  </div>
</template>

<script>
  import {getRealtimeMetrics, getDailyReport, getUserTop, getClientTop, getTopicTop} from '@/api/mqtt/dashboard'
  import Metrics from './metrics'
  import {getTopicFilterSubscriberCntTopOption} from "./option";

  export default {
    name: "dashboard",
    components: {Metrics},
    data() {
      return {
        realtimeMetrics: {
          sessionCnt: '-',
          receiveTotal: '-',
          receiveSuccess: '-',
          receiveFail: '-',
          receiveSuccessRate: '-',
          avgCost: '-',
          maxCost: '-',
          sendTotal: '-',
          sendSuccess: '-',
          sendFail: '-',
          sendSuccessRate: '-'
        },
        dailyReport: [],
        userTop: {
          userReceiveSuccessCntTop: [],
          userSendSuccessCntTop: []
        },
        clientTop: {
          clientReceiveSuccessCntTop: [],
          clientSendSuccessCntTop: [],
          remoteAddressReceiveSuccessCntTop: [],
          remoteAddressSendSuccessCntTop: {}
        },
        topicTop: {
          topicFilterSubscriberCntTop: [],
          topicReceiveSuccessPublishCntTop: [],
          topicSendSuccessPublishCntTop: []
        },
        timer: null
      }
    },
    mounted() {
      //查询一个月的日报表，折线图展示
      this.queryDailyReport()
      //查询用户top
      this.queryUserTop()
      //查询客户端top
      this.queryClientTop()
      //查询主题top
      this.queryTopicTop()
      //查询实时指标
      this.queryRealtimeMetrics()
      //延时初始化定时器，以防页面未加载完成就执行定时任务
      setTimeout(() => {
        this.timer = setInterval(() => {
          //定时查询实时指标
          this.queryRealtimeMetrics()
        }, 30000)
      }, 100)
    },
    beforeDestroy() {
      clearInterval(this.timer);
    },
    methods: {
      //查询实时指标
      queryRealtimeMetrics() {
        let self = this

        getRealtimeMetrics()
          .then(response => {
            let result = response.data
            self.setRealtimeMetrics(result.data)
          })
          .catch((err) => {
            self.$Message.error({
              content: err,
              duration: 10,
              closable: true
            })
          })
      },
      setRealtimeMetrics(data) {
        this.realtimeMetrics.sessionCnt = data.sessionCnt === null ? '-' : data.sessionCnt
        this.realtimeMetrics.receiveTotal = data.receiveTotal === null ? '-' : data.receiveTotal
        this.realtimeMetrics.receiveSuccess = data.receiveSuccess === null ? '-' : data.receiveSuccess
        this.realtimeMetrics.receiveFail = data.receiveFail === null ? '-' : data.receiveFail
        this.realtimeMetrics.receiveSuccessRate = data.receiveSuccessRate === null ? '-' : data.receiveSuccessRate
        this.realtimeMetrics.avgCost = data.avgCost === null ? '-' : data.avgCost
        this.realtimeMetrics.maxCost = data.maxCost === null ? '-' : data.maxCost
        this.realtimeMetrics.sendTotal = data.sendTotal === null ? '-' : data.sendTotal
        this.realtimeMetrics.sendSuccess = data.sendSuccess === null ? '-' : data.sendSuccess
        this.realtimeMetrics.sendFail = data.sendFail === null ? '-' : data.sendFail
        this.realtimeMetrics.sendSuccessRate = data.sendSuccessRate === null ? '-' : data.sendSuccessRate
      },
      //查询日报表
      queryDailyReport() {
        let self = this
        //查询一个月的日报表
        getDailyReport()
          .then(response => {
            self.dailyReport = response.data.data
            //折线图展示
            self.drawDailyReport()
          })
          .catch((err) => {
            self.$Message.error({
              content: err,
              duration: 10,
              closable: true
            })
          })
      },
      //绘制折线图
      drawDailyReport() {
        let self = this
        let days = []
        let receiveTotalVals = []
        let receiveSuccessVals = []
        let sendTotalVals = []
        let sendSuccessVals = []
        let avgSessionVals = []
        let maxSessionVals = []
        let noAckVals = []
        for (let i = 0; i < self.dailyReport.length; i++) {
          days[i] = self.dailyReport[i].day
          receiveSuccessVals[i] = self.dailyReport[i].receiveSuccess
          receiveTotalVals[i] = self.dailyReport[i].receiveTotal
          sendTotalVals[i] = self.dailyReport[i].sendTotal
          sendSuccessVals[i] = self.dailyReport[i].sendSuccess
          avgSessionVals[i] = self.dailyReport[i].avgSessionCnt
          maxSessionVals[i] = self.dailyReport[i].maxSessionCnt
          noAckVals[i] = self.dailyReport[i].noAckCnt
        }
        //入站报表折线图
        let receiveReport = self.$echarts.init(document.getElementById('receiveReport'))
        receiveReport.setOption({
          title: {text: '入站数统计'},
          tooltip: {},
          legend: {},
          xAxis: {
            data: days
          },
          yAxis: {},
          series: [
            {
              name: '入站总数',
              type: 'line',
              smooth: true,
              data: receiveTotalVals
            }, {
              name: '入站成功数',
              type: 'line',
              smooth: true,
              data: receiveSuccessVals
            }
          ]
        })
        //出站报表折线图
        let sendReport = self.$echarts.init(document.getElementById('sendReport'))
        sendReport.setOption({
          title: {text: '出站数统计'},
          tooltip: {},
          legend: {},
          xAxis: {
            data: days
          },
          yAxis: {},
          series: [
            {
              name: '出站总数',
              type: 'line',
              smooth: true,
              data: sendTotalVals
            }, {
              name: '出站成功数',
              type: 'line',
              smooth: true,
              data: sendSuccessVals
            }
          ]
        })
        //会话报表折线图
        let sessionReport = self.$echarts.init(document.getElementById('sessionReport'))
        sessionReport.setOption({
          title: {text: '会话数统计'},
          tooltip: {},
          legend: {data: ['平均会话数', '最大会话数']},
          xAxis: {
            data: days
          },
          yAxis: {},
          series: [
            {
              name: '平均会话数',
              type: 'line',
              smooth: true,
              data: avgSessionVals
            }, {
              name: '最大会话数',
              type: 'line',
              smooth: true,
              data: maxSessionVals
            }
          ]
        })

        //出站未确认报表折线图
        let noAckReport = self.$echarts.init(document.getElementById('noAckReport'))
        noAckReport.setOption({
          title: {text: '未确认报文数统计'},
          tooltip: {},
          legend: {},
          xAxis: {
            data: days
          },
          yAxis: {},
          series: [
            {
              name: '未确认报文数',
              type: 'line',
              smooth: true,
              data: noAckVals
            }
          ]
        })
      },
      //查询用户top
      queryUserTop() {
        let self = this
        getUserTop()
          .then(response => {
            self.userTop = response.data.data
            self.drawUserTopBar()
          })
          .catch((err) => {
            self.$Message.error({
              content: err,
              duration: 10,
              closable: true
            })
          })
      },
      //绘制用户top柱状图
      drawUserTopBar() {
        let self = this
        //用户入站成功数TOP3
        let users = []
        let userReceiveSuccessCntTopVals = []
        for (let i = 0; i < self.userTop.userReceiveSuccessCntTop.length; i++) {
          users[i] = userTop.userReceiveSuccessCntTop[i].userName
          userReceiveSuccessCntTopVals[i] = userTop.userReceiveSuccessCntTop[i].cnt
        }
        let userReceiveSuccessCntTop = self.$echarts.init(document.getElementById('userReceiveSuccessCntTop'))
        userReceiveSuccessCntTop.setOption({
          title: {
            text: '用户入站成功数TOP3',
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {            // 坐标轴指示器，坐标轴触发有效
              type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
            }
          },
          xAxis: {
            type: 'value'
          },
          yAxis: {
            type: 'category',
            data: users
          },
          series: [{
            data: userReceiveSuccessCntTopVals,
            type: 'bar'
          }]
        })

        //用户出站成功数TOP3
        users = []
        let userSendSuccessCntTopVals = []
        for (let i = 0; i < self.userTop.userSendSuccessCntTop.length; i++) {
          users[i] = userTop.userSendSuccessCntTop[i].userName
          userSendSuccessCntTopVals[i] = userTop.userSendSuccessCntTop[i].cnt
        }
        let userSendSuccessCntTop = self.$echarts.init(document.getElementById('userSendSuccessCntTop'))
        userSendSuccessCntTop.setOption({
          title: {
            text: '用户出站成功数TOP3',
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {            // 坐标轴指示器，坐标轴触发有效
              type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
            }
          },
          xAxis: {
            type: 'value'
          },
          yAxis: {
            type: 'category',
            data: users
          },
          series: [{
            data: userSendSuccessCntTopVals,
            type: 'bar'
          }]
        })
      },
      //查询客户端top
      queryClientTop() {
        let self = this
        getClientTop()
          .then(response => {
            self.clientTop = response.data.data
            self.drawClientTopBar()
          })
          .catch((err) => {
            self.$Message.error({
              content: err,
              duration: 10,
              closable: true
            })
          })
      },
      //绘制客户端top柱状图
      drawClientTopBar() {
        let self = this
        //客户端入站成功数TOP3
        let clientIds = []
        let clientReceiveSuccessCntTopVals = []
        for (let i = 0; i < self.clientTop.clientReceiveSuccessCntTop.length; i++) {
          clientIds[i] = clientTop.clientReceiveSuccessCntTop[i].clientId
          clientReceiveSuccessCntTopVals[i] = clientTop.clientReceiveSuccessCntTop[i].cnt
        }
        let clientReceiveSuccessCntTop = self.$echarts.init(document.getElementById('clientReceiveSuccessCntTop'))
        clientReceiveSuccessCntTop.setOption({
          title: {
            text: '客户端入站成功数TOP3',
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {            // 坐标轴指示器，坐标轴触发有效
              type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
            }
          },
          xAxis: {
            type: 'value'
          },
          yAxis: {
            type: 'category',
            data: clientIds
          },
          series: [{
            data: clientReceiveSuccessCntTopVals,
            type: 'bar'
          }]
        })

        //客户端出站成功数TOP3
        clientIds = []
        let clientSendSuccessCntTopVals = []
        for (let i = 0; i < self.clientTop.clientSendSuccessCntTop.length; i++) {
          clientIds[i] = clientTop.clientSendSuccessCntTop[i].clientId
          clientSendSuccessCntTopVals[i] = clientTop.clientSendSuccessCntTop[i].cnt
        }
        let clientSendSuccessCntTop = self.$echarts.init(document.getElementById('clientSendSuccessCntTop'))
        clientSendSuccessCntTop.setOption({
          title: {
            text: '客户端出站成功数TOP3',
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {            // 坐标轴指示器，坐标轴触发有效
              type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
            }
          },
          xAxis: {
            type: 'value'
          },
          yAxis: {
            type: 'category',
            data: clientIds
          },
          series: [{
            data: clientSendSuccessCntTopVals,
            type: 'bar'
          }]
        })

        //客户端地址入站成功数TOP3
        let remoteAddresses = []
        let remoteAddressReceiveSuccessCntTopVals = []
        for (let i = 0; i < self.clientTop.remoteAddressReceiveSuccessCntTop.length; i++) {
          remoteAddresses[i] = clientTop.remoteAddressReceiveSuccessCntTop[i].remoteAddress
          remoteAddressReceiveSuccessCntTopVals[i] = clientTop.remoteAddressReceiveSuccessCntTop[i].cnt
        }
        let remoteAddressReceiveSuccessCntTop = self.$echarts.init(document.getElementById('remoteAddressReceiveSuccessCntTop'))
        remoteAddressReceiveSuccessCntTop.setOption({
          title: {
            text: '客户端地址入站成功数TOP3',
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {            // 坐标轴指示器，坐标轴触发有效
              type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
            }
          },
          xAxis: {
            type: 'value'
          },
          yAxis: {
            type: 'category',
            data: remoteAddresses
          },
          series: [{
            data: remoteAddressReceiveSuccessCntTopVals,
            type: 'bar'
          }]
        })

        //客户端地址出站成功数TOP3
        remoteAddresses = []
        let remoteAddressSendSuccessCntTopVals = []
        for (let i = 0; i < self.clientTop.remoteAddressSendSuccessCntTop.length; i++) {
          remoteAddresses[i] = clientTop.remoteAddressSendSuccessCntTop[i].remoteAddresse
          remoteAddressSendSuccessCntTopVals[i] = clientTop.remoteAddressSendSuccessCntTop[i].cnt
        }
        let remoteAddressSendSuccessCntTop = self.$echarts.init(document.getElementById('remoteAddressSendSuccessCntTop'))
        remoteAddressSendSuccessCntTop.setOption({
          title: {
            text: '客户端地址出站成功数TOP3',
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {            // 坐标轴指示器，坐标轴触发有效
              type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
            }
          },
          xAxis: {
            type: 'value'
          },
          yAxis: {
            type: 'category',
            data: remoteAddresses
          },
          series: [{
            data: remoteAddressSendSuccessCntTopVals,
            type: 'bar'
          }]
        })
      },
      //查询主题top
      queryTopicTop() {
        let self = this
        getTopicTop()
          .then(response => {
            self.topicTop = response.data.data
            self.drawTopicTopBar()
          })
          .catch((err) => {
            self.$Message.error({
              content: err,
              duration: 10,
              closable: true
            })
          })
      },
      //绘制主题top柱状图
      drawTopicTopBar() {
        let self = this
        //主题过滤器订阅数TOP3
        let topicFilterSubscriberCntTop = self.$echarts.init(document.getElementById('topicFilterSubscriberCntTop'))
        topicFilterSubscriberCntTop.setOption(getTopicFilterSubscriberCntTopOption(self.topicTop.topicFilterSubscriberCntTop))


        //主题的PUBLISH入站成功数TOP3
        let topicNames = []
        let topicReceiveSuccessPublishCntTopVals = []
        for (let i = 0; i < self.topicTop.topicReceiveSuccessPublishCntTop.length; i++) {
          topicNames[i] = self.topicTop.topicReceiveSuccessPublishCntTop[i].topicName
          topicReceiveSuccessPublishCntTopVals[i] = self.topicTop.topicReceiveSuccessPublishCntTop[i].cnt
        }
        let topicReceiveSuccessPublishCntTop = self.$echarts.init(document.getElementById('topicReceiveSuccessPublishCntTop'))
        topicReceiveSuccessPublishCntTop.setOption({
          title: {
            text: '主题的PUBLISH入站成功数TOP3',
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {            // 坐标轴指示器，坐标轴触发有效
              type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
            }
          },
          xAxis: {
            type: 'value'
          },
          yAxis: {
            type: 'category',
            data: topicNames
          },
          series: [{
            data: topicReceiveSuccessPublishCntTopVals,
            type: 'bar'
          }]
        })

        //主题的PUBLISH出站成功数TOP3
        topicNames = []
        let topicSendSuccessPublishCntTopVals = []
        for (let i = 0; i < self.topicTop.topicSendSuccessPublishCntTop.length; i++) {
          topicNames[i] = self.topicTop.topicSendSuccessPublishCntTop[i].topicName
          topicSendSuccessPublishCntTopVals[i] = self.topicTop.topicSendSuccessPublishCntTop[i].cnt
        }
        let topicSendSuccessPublishCntTop = self.$echarts.init(document.getElementById('topicSendSuccessPublishCntTop'))
        topicSendSuccessPublishCntTop.setOption({
          title: {
            text: '主题的PUBLISH出站成功数TOP3',
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {            // 坐标轴指示器，坐标轴触发有效
              type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
            }
          },
          xAxis: {
            type: 'value'
          },
          yAxis: {
            type: 'category',
            data: topicNames
          },
          series: [{
            data: topicSendSuccessPublishCntTopVals,
            type: 'bar'
          }]
        })
      }
    }
  }
</script>

<style scoped>

</style>
